<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统 | 登录页面</title>
    <link rel="stylesheet" th:href="@{/admin/login_page.css}">
</head>
<body>
<div class="container">
    <div class="login-wrapper">
        <div class="header">BookShop-后台管理系统</div>
        <div class="form-wrapper">
            <input type="text" name="username" placeholder="账号" class="input-item" id="account">

            <input type="password" name="password" placeholder="密码" class="input-item" id="password">
            <span class="warning" id="form-warning" >账号和密码不能为空</span>
            <span class="warning" id="login_warning" >账号或密码错误，请确认账号和密码</span>
            <div class="btn" id="login-btn">登录</div>
        </div>
        <div class="msg">
            忘记密码？请联系管理员
        </div>
    </div>
</div>
</div>

<script th:src="@{/js/jquery-2.0.0.js}"></script><
<script type="text/javascript">

    $(document).ready(function () {
        $("#login-btn").click(function () {
            document.getElementById("form-warning").style.display = "none";
            document.getElementById("login_warning").style.display="none";
            // 获取Input表单中的account和password
            const account = document.getElementById("account").value
            const password = document.getElementById("password").value
            if (account === '' || password === '') {
                document.getElementById("form-warning").style.display = "block";
            }else{
                login(account,password)
            }

        })
    })

    function login(account,password) {
        const login_data = {'account':account,'password':password}

        $.ajax({
            url:"/admin/login/server",
            dataType:"json",
            method:"POST",
            contentType:"application/json;charset=UTF-8",
            data:JSON.stringify(login_data),
            success : function (data) {
                if (data.status === 200){
                    location.href="/admin/home"
                }else if (data.status === 400){
                    document.getElementById("login_warning").style.display = "block";
                }else{
                    alert("系统出现错误")
                }
            }
        })
    }
</script>
</body>
</html>